<template>
	<div>
		<template>
			<headers :title="'登录'"></headers>
		</template>
		<div class="box">
			<form @submit.prevent="login" action="">
				<h1>
					手机号登录
				</h1>
				<p>
					未注册的手机号登陆后将自动注册
				</p>
				<div class="input">
					<input v-model="userPhone" type="text" placeholder="请输入手机号码" maxlength="11">
				</div>
				<div class="input position-relative">
					<input v-model="userImgCode" type="text" placeholder="请输入图形验证码">
					<img :src="picUrl" @click="flush" alt="" v-if="picUrl">
				</div>
				<div class="input position-relative">
					<input type="text" placeholder="请输入短信验证码" v-model="userCode">
					<button class="bg-transparent border-0" @click.prevent="getCode(valid())">
						{{ times === 60 ? '获取验证码' : times + '秒后重新发送' }}
					</button>
				</div>
				<button class="btn-block btn">登录</button>
			</form>
		</div>
	</div>
</template>

<script>
	import headers from '@/components/header'
	import {
		getImgCode,getCode,codeLogin
	} from '@/api/login'
	export default {
		name: 'AppLogin',
		components: {
			headers
		},
		data(){
			return{
				picUrl:'',
				picKey:'',
				userPhone:'',
				userImgCode:'',
				userCode:'',
				timer:null,
				times:60
			}
		},
		created() {
			this.flush()
		},
		
		methods:{
			async login() {
				const {data:{userId,token}} = await codeLogin(this.userPhone,this.userCode)
				this.$store.commit('user/setUserInfo',{userId,token})
				this.$toast('登录成功')
				this.$router.replace(this.$route.query.backUrl || '/home')
				
			},
			
			async getCode(isTrue) {
				if(this.times === 60 && !this.timer && isTrue){
					await getCode(this.userImgCode,this.picKey,this.userPhone)
					this.$toast('短信发送成功，请注意查收')
					 this.timer = setInterval(() => {
						 this.times --
						 if(this.times <= 0){
							 this.times = 60
							 clearInterval(this.timer)
						 }
						 
					 },1000)
				}
			},
			valid() {
				if(!/^1[3-9]\d{9}$/.test(this.userPhone)){
					this.$toast('请输入正确的手机号格式')
					return false
				}
				if(!/\w{4}$/.test(this.userImgCode)){
					this.$toast('请输入正确的图形验证码')
					return false
				}
				return true
			},
			
			async flush() {
				const {data:{
					base64,
					key
				}} = await getImgCode()
				this.picKey = key
				this.picUrl = base64
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../style/bootstrap.css');

	form {
		margin: 20px;

		h1 {
			font-weight: 100;
		}

		p {
			font-size: 10px;
			letter-spacing: 1px;
			color: #afafaf;
		}

		.input {
			margin: 30px 0px;
			width: 100vw;

			input {
				width: 100%;
				border: 2px transparent solid;
				border-bottom: 1px solid #dcdcdc;
				transition: 0.2s;
				padding: 10px 0px;
				letter-spacing: 2px;

				&:focus {
					border: 2px solid transparent;
					box-shadow: 0px 0px 20px #85d1ff;
				}
			}

			button {
				color: #ff8330;
				position: absolute;
				right: 30px;
				top: 10px;
			}

			img {
				position: absolute;
				right: 30px;
				width: 30%;
			}
		}

		.btn-block {
			color: white;
			background-image: linear-gradient(90deg, #ffb12a, #ff5202);
			border-radius: 20px;
		}
	}
</style>